@include('layouts.Common.header')
<script src="/plugins/codemirror/codemirror.js"></script>

<script src="/plugins/codemirror/mode/javascript/javascript.js"></script>

<link rel="stylesheet" href="/plugins/codemirror/codemirror.css">
<link rel="stylesheet" href="/plugins/codemirror/theme/monokai.css">
<form name="actionForm" id="actionForm" class="_autoheight" method="post" autocomplete="off">
    @csrf
    <div class="form-group row">
        <label class="col-sm-2  col-form-label text-right"><i>*</i>单聊人员：</label>
        <div class="col-sm-3">
            <div class="selectuser"></div>
        </div>
        <label class="col-sm-2  col-form-label text-right"><i>*</i>消息类型：</label>
        <div class="col-sm-3">
            <select class="selectpicker" name=data[msgKey]>
                <option value="officialTextMsg" data-code='{"content": "xxxx"}'>TEXT文本</option>
                <option value="officialImageMsg" data-code='{"photoURL": "xxxx"}'>图片</option>
                <option value="officialMarkdownMsg" data-code='{"title": "xxxx","text": "xxxx"}'>Markdown</option>
                <option value="officialActionCardMsg"
                    data-code='{"title": "xxxx","text": "xxxx","singleTitle": "xxxx","singleURL":"xxxx"}'>单个按钮整体跳转
                </option>
                <option value="officialActionCardMsg1"
                    data-code='{"title": "xxxx","text": "xxxx","buttonTitle1": "xxxx","buttonUrl1":"xxxx","buttonTitle2": "xxxx","buttonUrl2":"xxxx"}'>
                    2单个事件横排</option>
                <option value="officialActionCardMsg2"
                    data-code='{"title": "xxxx","text": "xxxx","buttonTitle1": "xxxx","buttonUrl1":"xxxx","buttonTitle2": "xxxx","buttonUrl2":"xxxx"}'>
                    2单个事件竖排</option>
            </select>

        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2  col-form-label text-right"><i>*</i>消息内容：</label>
        <div class="col-sm-8">
            <textarea id="codeMirrorDemo" name=data[msgParam] class="p-3">{"content": "xxxx"}</textarea>
        </div>
    </div>


    <input type="dosubmit" id="dosubmit" name="dosubmit" hidden />
</form>

{!! js() !!}
<script>
    $(function() {
        $(".selectuser").select({!! json_encode($selectuser) !!});
        var editor = CodeMirror.fromTextArea(document.getElementById("codeMirrorDemo"), {
            mode: "javascript",
            theme: "monokai",
        });
        editor.on("change", function() {
            $("#codeMirrorDemo").val(editor.getValue());
        });
        $(".selectpicker").change(function(a) {
            console.log(JSON.stringify($(this).find("option:selected").data("code")));
            editor.setValue(JSON.stringify($(this).find("option:selected").data("code")));
        })
    })
</script>
